<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Repository Browser</title>
		
		<!-- Combo-handled YUI CSS files: --> 
		<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.6.0/build/assets/skins/sam/skin.css"> 

		<!-- Combo-handled YUI JS files: --> 
		<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/connection/connection-min.js&2.6.0/build/datasource/datasource-min.js&2.6.0/build/dragdrop/dragdrop-min.js&2.6.0/build/element/element-beta-min.js&2.6.0/build/datatable/datatable-min.js&2.6.0/build/resize/resize-min.js&2.6.0/build/layout/layout-min.js&2.6.0/build/treeview/treeview-min.js&2.6.0/build/tabview/tabview-min.js"></script>
	</head>
	<body class="yui-skin-sam">
	
		<div id="tree"></div>
		<div id="detail"></div>
		<div id="detail_bottom"></div>
		<div id="bottom" class="yui-navset">
			<ul class="yui-nav">
				<li class="selected"><a href="#tab1"><em>Repository Attributes</em></a></li>
				<li><a href="#tab2"><em>Repository Events</em></a></li>
				<li><a href="#tab3"><em>Workspace Namespaces</em></a></li>
				<li><a href="#tab4"><em>Workspace Node Types</em></a></li>
			</ul>
			<div class="yui-content">
				<div id="tab1"></div>
				<div id="tab2"></div>
				<div id="tab3"></div>
				<div id="tab4"></div>
			</div>
		</div>
		
		<script type="text/javascript">

			var myColumnDefs4 = [
				{key:"path", sortable:true, resizeable:true},
				{key:"type", sortable:true, resizeable:true},
				{key:"user", sortable:true, resizeable:true}
			];
	
			var myDataSource4 = new YAHOO.util.DataSource("services/events.json");
	
			myDataSource4.responseType = YAHOO.util.DataSource.TYPE_JSON;
			myDataSource4.connXhrMode = "queueRequests";
			myDataSource4.responseSchema = {
				resultsList: "content.event",
				fields: ["path", "type", "user"]
			};

			var myColumnDefs5 = [
   				{key:"prefix", sortable:true, resizeable:true},
   				{key:"uri", sortable:true, resizeable:true}
   			];
   	
   			var myDataSource5 = new YAHOO.util.DataSource("services/workspace/namespaces.json");
   	
   			myDataSource5.responseType = YAHOO.util.DataSource.TYPE_JSON;
   			myDataSource5.connXhrMode = "queueRequests";
   			myDataSource5.responseSchema = {
   				resultsList: "workspace.namespaces.namespace",
   				fields: ["prefix", "uri"]
   			};

			var myColumnDefs6 = [
   				{key:"name", sortable:true, resizeable:true},
   				{key:"mixin", sortable:true, resizeable:true},
   				{key:"orderableChildNodes", sortable:true, resizeable:true}
   			];
   	
   			var myDataSource6 = new YAHOO.util.DataSource("services/workspace/nodeTypes.json");
   	
   			myDataSource6.responseType = YAHOO.util.DataSource.TYPE_JSON;
   			myDataSource6.connXhrMode = "queueRequests";
   			myDataSource6.responseSchema = {
   				resultsList: "workspace.nodeTypes.nodeType",
   				fields: ["name", "mixin", "orderableChildNodes"]
   			};

			var myTabs = new YAHOO.widget.TabView("bottom");

			var tab2 = myTabs.getTab(1);

			function handleClick1(e) {
				var myDataTable4 = new YAHOO.widget.DataTable("tab2", myColumnDefs4, myDataSource4, {scrollable:true});
			}

			tab2.addListener('click', handleClick1);

			var tab3 = myTabs.getTab(2);

			function handleClick2(e) {
				var myDataTable5 = new YAHOO.widget.DataTable("tab3", myColumnDefs5, myDataSource5, {scrollable:true});
			}

			tab3.addListener('click', handleClick2);

			var tab4 = myTabs.getTab(3);

			function handleClick3(e) {
				var myDataTable6 = new YAHOO.widget.DataTable("tab4", myColumnDefs6, myDataSource6, {scrollable:true});
			}

			tab4.addListener('click', handleClick3);
				
		</script>  
		
		<script>

			(function() {

				var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event;

				Event.onDOMReady(function() {

					var layout = new YAHOO.widget.Layout({
						units: [
							{position: 'left', body: 'tree', width: 512, gutter: '5px', resize: true, scroll: true},
							{position: 'center', body: 'detail', gutter: '5px', resize: true, scroll: true},
							{position: 'right', body: 'detail_bottom', width: 384, gutter: '5px', resize: true, scroll: true},
							{position: 'bottom', body: 'bottom', height: 256, gutter: '5px', resize: true, scroll: true},
						]
					});

					layout.render();

				});

			})();
			
		</script>
		
		<script type="text/javascript">

			var myDataSource1;
			var myDataTable1;

			var myDataSource2;
			var myDataTable2;

			YAHOO.example.treeExample = function() {

				var tree;

				function loadNodeData(node, fnLoadComplete)  {

					var path = "/";

					if (node.depth > 0) {
		
						for (var i = 1, j = node.depth; i < j; i++) {
	
							path = path + node.getAncestor(i).label + "/";
							
						}
	
						path = path + node.label;

					}

					var sUrl = "services/path/nodes" + path + ".json?nodeDepth=2";

					var callback = {

						success: function(oResponse) {
							
							var oResults = eval("(" + oResponse.responseText + ")");

							if ((oResults.content.node)) {

								if (YAHOO.lang.isArray(oResults.content.node)) {

									for (var i = 0, j = oResults.content.node.length; i < j; i++) {
										var tempNode = new YAHOO.widget.TextNode(oResults.content.node[i].@name, node, false);
									}

								} 
								else {
									var tempNode = new YAHOO.widget.TextNode(oResults.content.node.@name, node, false);
								}

							}

							oResponse.argument.fnLoadComplete();

						},

						failure: function(oResponse) {
							
							oResponse.argument.fnLoadComplete();
							
						},

						argument: {
							
							"node": node,
							"fnLoadComplete": fnLoadComplete
							
						},

						timeout: 7000

					};

					YAHOO.util.Connect.asyncRequest('GET', sUrl, callback);

				}
	
				function buildTree() {
	
					tree = new YAHOO.widget.TreeView("tree");

					tree.setDynamicLoad(loadNodeData, "mode0");
					
					var root = tree.getRoot();

					var tempNode = new YAHOO.widget.TextNode("/", root, false);

					tree.subscribe("labelClick", function(node) {
						
						var myCallback = function() {
							this.set("sortedBy", null);
							this.onDataReturnReplaceRows.apply(this, arguments);
						};

						var callback1 = {
							success : myCallback,
							failure : myCallback,
							scope : myDataTable1
						};

						var callback2 = {
							success : myCallback,
							failure : myCallback,
							scope : myDataTable2
						};

						var path = "/";

						if (node.depth > 0) {
			
							for (var i = 1, j = node.depth; i < j; i++) {
		
								path = path + node.getAncestor(i).label + "/";
								
							}
		
							path = path + node.label;

						}
						
						myDataSource1.sendRequest(path + ".json?includeAllProperties=true", callback1);
						myDataSource2.sendRequest(path + ".json?includeAllAttributes=true", callback2);

					});
	
					tree.draw();
	
				}

				return {
	
					init: function() {
	
						buildTree();
	
					}
	
				}
	
			} ();
	
			YAHOO.util.Event.onDOMReady(YAHOO.example.treeExample.init, YAHOO.example.treeExample,true);

			YAHOO.util.Event.addListener(window, "load", function() {

				YAHOO.example.XHR_JSON = function() {

					var myColumnDefs1 = [
						{key:"name", sortable:true, resizeable:true},
						{key:"type", sortable:true, resizeable:true},
						{key:"value", sortable:true, resizeable:true}
					];

					myDataSource1 = new YAHOO.util.DataSource("services/path/nodes");

					myDataSource1.responseType = YAHOO.util.DataSource.TYPE_JSON;
					myDataSource1.connXhrMode = "queueRequests";
					myDataSource1.responseSchema = {
						resultsList: "content.node.properties.property",
						fields: ["name", "type","value"]
					};

					myDataTable1 = new YAHOO.widget.DataTable("detail", myColumnDefs1, myDataSource1, {scrollable:true, initialRequest:".json?includeAllProperties=true"});

					var myColumnDefs2 = [
						{key:"name", sortable:true, resizeable:true},
						{key:"value", sortable:true, resizeable:true}
					];

					myDataSource2 = new YAHOO.util.DataSource("services/path/nodes");

					myDataSource2.responseType = YAHOO.util.DataSource.TYPE_JSON;
					myDataSource2.connXhrMode = "queueRequests";
					myDataSource2.responseSchema = {
						resultsList: "content.node.attributes.attribute",
						fields: ["name", "value"]
					};

					myDataTable2 = new YAHOO.widget.DataTable("detail_bottom", myColumnDefs2, myDataSource2, {scrollable:true, initialRequest:".json?includeAllAttributes=true"});

					var myColumnDefs3 = [
						{key:"name", sortable:true, resizeable:true},
						{key:"value", sortable:true, resizeable:true}
					];

					var myDataSource3 = new YAHOO.util.DataSource("services/repository/attributes.json");

					myDataSource3.responseType = YAHOO.util.DataSource.TYPE_JSON;
					myDataSource3.connXhrMode = "queueRequests";
					myDataSource3.responseSchema = {
						resultsList: "content.repository.attribute",
						fields: ["name", "value"]
					};

					var myDataTable3 = new YAHOO.widget.DataTable("tab1", myColumnDefs3, myDataSource3, {scrollable:true});
					
				}();

			});
			
		</script>

		
	</body>
</html>